<template>
  <aside class="sidebar">
    <nav>
      <ul>
        <template v-for="item in menuItems" :key="item.menuName">
          <li v-if="!item.hidden">
            <a 
              href="#" 
              :class="{ active: currentCategory === item.menuName }"
              @click.prevent="$emit('select-category', item.menuName)"
            >
              {{ item.menuName }}
            </a>
            <ul v-if="item.children" class="submenu">
              <li v-for="child in item.children" :key="child.menuName">
                <a 
                  href="#" 
                  :class="{ active: currentCategory === child.menuName }"
                  @click.prevent="$emit('select-category', child.menuName)"
                >
                  {{ child.menuName }}
                </a>
              </li>
            </ul>
          </li>
        </template>
      </ul>
    </nav>
  </aside>
</template>

<script setup lang="ts">
import { MenuItem } from '../types';

defineProps<{
  menuItems: MenuItem[];
  currentCategory: string;
}>();

defineEmits<{
  (e: 'select-category', category: string): void;
}>();
</script>

<style scoped lang="scss">
.sidebar {
  width: 240px;
  background: #f5f5f5;
  padding: 2rem 0;
  height: 100vh;
  overflow-y: auto;

  nav ul {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      a {
        display: block;
        padding: 0.8rem 2rem;
        color: #666;
        text-decoration: none;
        transition: all 0.3s;

        &:hover, &.active {
          background: #e0e0e0;
          color: #333;
        }
      }
    }
  }

  .submenu {
    background: #fff;
    
    li a {
      padding-left: 3rem;
      font-size: 0.9rem;
    }
  }
}
</style> 